<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直对齐方式</title>
    <style>
        div  {
            border: 1px solid #000000;
        }
        img {
            border: 1px solid #000;

            /*
                这个意思是相对于文字的某种方式对齐列如：
                相对于文字的基线对齐
                图片的底部与文字的底部对齐
                图片的中间与文字的中间对齐
                图片的顶部与文字的顶部对齐
            */

            /* 居中 */
            vertical-align: middle;

            /* top */
            /*vertical-align: top;*/

            /* 底部 */
            /*vertical-align: bottom;*/
        }
    </style>
</head>
<body>
<div>
    <img src="./images/abcd.jpg" alt="">
    haha
</div>
</body>
</html>
